<template>
  
  <router-view :currUser="currUser" :Login="Login" :exitLogin="exitLogin"></router-view>

  <!-- 底部导航栏区域 -->
  <footer-nav :footerNav='footerNav' :footerNavTo='footerNavTo'
      :class="{'header-light': !$store.state.isDarkMode, 'header-dark': $store.state.isDarkMode}"
  />
</template>


<script>
import FooterNav from './components/FooterNav.vue';
import router from './router';

/* 引入用户数据 */
import UserData from './data/UserData.json'

export default {
  name: 'App',
  components: {
    FooterNav,
  },
  data(){
    return{
      footerNav: 0,
      currUser: undefined, //当前登录的用户信息
    }
  },
  methods:{
    /* 导航切换 */
    footerNavTo(index){
      this.footerNav = index
      switch(index){
        case 0:
          router.push('/home')
          break
        case 1:
          break
        case 2:
          break
        case 3:
          router.push('/myPage')
          break
      }
    },

    /* 登录 */
    Login(uid, password){
      let r = false
      UserData.users.forEach(u => {
        if(u.uid === uid && u.password === password){
          r = true
          this.currUser = u
          return
        }
      });
      return r
    },
    /* 退出登录 */
    exitLogin(){
      this.currUser = undefined
      this.$router.push('/myPage')
    }
  },
  mounted(){
    router.push('/home')
  }
}
</script>

<style lang="less">
/* #region重置默认样式start */
* {
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}
ul,ol {
  list-style: none;
}
/* #endregion重置默认样式end */

/* #region字体、图标库引入start */
@font-face {
  font-family: '像素风字体';
  src: url('./assets/fonts/Zpix.ttf');
}
@font-face {
  font-family: 'icon-heat';
  src: url('./assets/fonts/iconfont.woff2?t=1684817928814') format('woff2'),
       url('./assets/fonts/iconfont.woff?t=1684817928814') format('woff'),
       url('./assets/fonts/iconfont.ttf?t=1684817928814') format('truetype');
}
@font-face {
  font-family: 'icon-footer';
  src: url('./assets/fonts/iconfont2.woff2?t=1685941563790') format('woff2'),
       url('./assets/fonts/iconfont2.woff?t=1685941563790') format('woff'),
       url('./assets/fonts/iconfont2.ttf?t=1685941563790') format('truetype');
}
/* #endregion字体、图标库引入end */

/* #region白色模式样式start */
@light-main-font: rgb(148, 148, 148);
@light-title-font: rgb(65, 65, 65);
@light-main-bgc:rgb(240, 240, 240);
@light-sub-bgc:rgb(255, 255, 255);
@light-input-bgc:rgb(223, 223, 223);

.header-light {
  background-color: @light-sub-bgc;
  color: @light-main-font;
}
.main-light {
  background-color: @light-main-bgc;
  color: black;
}
.input-light {
  background-color: @light-input-bgc;
}
.input-light input {
  color: @light-main-font;
}
.work-shower-light {
  background-color: @light-sub-bgc;
  color: @light-title-font;
}
/* #endregion白色模式样式end */

/* #region深色模式样式start */
@dark-main-font: rgb(190, 190, 190);
@dark-title-font: rgb(238, 238, 238);
@dark-main-bgc: rgb(22, 22, 22);
@dark-sub-bgc: rgb(44, 44, 44);
@dark-input-bgc: rgb(73, 73, 73);

.header-dark {
  background-color: @dark-sub-bgc;
  color: @dark-main-font;
}
.main-dark {
  background-color: @dark-main-bgc;
  color: @dark-main-font;
}
.input-dark {
  background-color: @dark-input-bgc;
}
.input-dark input {
  color: @dark-main-font;
}
.work-shower-dark {
  background-color: @dark-sub-bgc;
  color: @dark-title-font;
}
/* #endregion深色模式样式end */

/* #region浮动相关start */
.leftFix {
  float: left;
}
.rightFix {
  float: right;
}
.clearFix {
  clear: both;
}
/* #endregion浮动相关end */

/* #region图标Icon样式start */
.icon-search::before {
  content: url(https://wiki.52poke.com/load.php?modules=skins.vector.icons&image=search&format=original&skin=vector-2022&version=1jhpn);
  display: inline-block;
  opacity: 0.3;
  transform: translate(-6px, 3px);
  background-size: 50px 50px;
}
/* #endregion图标Icon样式end */

/* 无下导航覆盖式页面版心 */
.page-container {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  z-index: 9;
  overflow: hidden;
}
</style>
